<template>
  <div class="agreement-page" id='not-app-article'>
    <header id="masthead" class='site-header header-bg' role="banner">
      <h2 class='site-branding'>{{agreementTitle}}</h2>
    </header>
    <div class='content-area'>
      <main class='site-main' role="main">
        <article class='agreement-article single'>
          <div class='entry-content'>
            <p class='agreement-update-time'>更新时间：{{updateTime}}</p>
            <div class='agreement-info' v-html="agreementContent"></div>
          </div>
        </article>
      </main>
    </div>
  </div>
</template>

<script lang='ts'>
import api from '@/api/api'
import markdownToHtml from '@/utils/markdown'
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { EditPen } from '@element-plus/icons-vue'
import { timeAgo } from '@/utils/commonUtil'

export default defineComponent({
  name: 'Agreement',
  components: { EditPen },
  setup(){
    const articleRef = ref()
    const reactiveData = reactive({
      creator: '' as any,
      agreementTitle: '' as any,
      agreementContent: '' as any,
      updateTime: '' as any
    })
    onMounted(()=>{
      getAgreementInfo()
    })
    const getAgreementInfo = () => {
      api.getAgreement().then(({data})=>{
        reactiveData.creator=data.data.creator
        reactiveData.agreementTitle=data.data.title
        reactiveData.agreementContent=markdownToHtml(data.data.content)
        reactiveData.updateTime=timeAgo(new Date(data.data.updateTime))
      })
    }
    return{
      ...toRefs(reactiveData)
    }
  }
})
</script>

<style lang='scss' scoped>
.agreement-page{
  height: 100%;
  background: var(--h-bg);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.agreement-page .content-area {
  margin-block: calc(var(--edge-tb) + var(--gap-divs)) var(--gap-area);
  margin-bottom: 0;
}
.header-bg {
  background: black url(@/assets/header/earth.jpg) no-repeat scroll center / cover;
}
.agreement-page .site-header{
  overflow: hidden;
}
.site-branding {
  color: rgb(255 255 255 / 60%);
  text-shadow: var(--text-shadow);
  font-size: 1rem;
  bottom: 1rem;
  right: var(--edge-lr);
  padding: 0.5rem 1rem;
  position: absolute;
}
.agreement-page .entry-content{
  width: 100%;
  font-family: var(--top-font-family);
  line-height: 2.5;
}
.agreement-info{
  counter-reset: section;
  text-align: justify;
}
@media (max-width: 671px) {
  .site-branding{
    display: none;
  }
}
@media (min-width: 1152px) {
  .agreement-page .site-header{
    position: fixed;
    right: 0;
    width: 45%;
    top: 0;
    margin: 0;
    border-radius: 0;
    height: 100%;
    animation: board-siteBG 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1;
    box-shadow: inset rgb(0 0 0 / 50%) 0.5rem 0 1rem 0;
  }
  .agreement-page .content-area {
    width: 55%;
    position: relative;
    margin-left: 0;
    animation: board-entryBG 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1;
  }
}
@keyframes board-entryBG {0% {left: -60%;}100% {left: 0;}}
@keyframes board-siteBG {0% {width: 100%;}100% {width:45%;}}
</style>
